import Modals from '@/components/modals/Modals';
import { Input } from 'antd';
import { useEffect, useState } from 'react';

import WorkModule from '../work-module';
import { GetWorkBenhList } from '@/common';
import workbenchService from '@/api/services/workbenchService';
import { SvgIcon } from '@/components/icon';
import '../work.scss';
import BoxInfo from '@/components/box/boxInfo';
import GradientBox from '@/components/GradientBox';
import usePermission from '@/hooks/event/usePermission';
interface NewAgentModeModalProps {
  open: boolean;
  title?: string;
  onOk?: () => void;
  onCancel?: () => void;
  goToAssistant?: (e: React.MouseEvent, obj: GetWorkBenhList) => void;
  goToApplication?: (e: React.MouseEvent, obj: GetWorkBenhList) => void;
  setWorkItems?: (data: any) => void;
  changeToPage?: (num: number) => void;
}

interface pageType {
  page: number;
  page_size: number;
  searchText: string;
  app_type: string | null;
  app_workbench_type: string;
  app_status: string | null;
}

const appOptions = [
  {
    id: 'agent',
    title: '创建智能体',
    description: '具备推理能力的智能聊天助手',
    icon: <SvgIcon icon="create-agent" size={280} className="mt-1" />,
  },
  {
    id: 'workflow',
    title: '创建工作流',
    description: '创建任务自动化的编排式工作流',
    icon: <SvgIcon icon="create-workflow" size={280} className="mt-1" />,
  },
  {
    id: 'fusion',
    title: '创建融合应用',
    description: '融合多个智能体可以随意与任意智能体对话',
    icon: <SvgIcon icon="create-fusion" size={280} className="mt-1" />,
  },
];

const NewAgentModeModal: React.FC<NewAgentModeModalProps> = ({
  open,
  title,
  onOk,
  onCancel,
  goToAssistant,
  goToApplication,
  setWorkItems,
  changeToPage,
}) => {
  const [isShow, setIsShow] = useState<boolean>(false);
  const [num, setNum] = useState<number>(0);

  const [isShowModel, setIsShowModel] = useState<boolean>(false);
  const [showTitle, setShowTitle] = useState<string>('');
  const [searchText, setSearchText] = useState<string>('');
  // const [defaultPage, setDefaultPage] = useState<pageType>({
  //   page: 1,
  //   page_size: 20,
  //   searchText: '',
  //   app_type: null, //应用类型
  //   app_workbench_type: 'market,public', //应用模板类型
  //   app_status: null, //审核状态
  // });
  // const [appList, setAppList] = useState<GetWorkBenhList[]>([]);
  // const [isNoData, setIsNoData] = useState<boolean>(true);
  // const [isHaveData, setIsHaveData] = useState<boolean>(true);
  // const [total, setTotal] = useState<number>(0);
  // const [flag, setflag] = useState<boolean>(false); // 用于防止多次触发

  const [appType, setAppType] = useState<string>('agent');
  const [key, setKey] = useState(0);
  const { isAdmin, isSuperAdmin } = usePermission();
  //获取应用市场列表
  // const getPublic = async () => {
  //   try {
  //     const res = await workbenchService.workListApi(defaultPage);
  //     setIsNoData(true);
  //     let data = [...appList, ...res.app_list];
  //     if (data.length === 0) {
  //       setIsHaveData(false);
  //     } else {
  //       setIsHaveData(true);
  //     }
  //     setAppList(data);
  //     setflag(false);
  //     setTotal(res.total);
  //   } catch (error) {
  //     console.log(error);
  //   }
  // };
  // useEffect(() => {
  //   if (isShowModel) {
  //     getPublic();
  //   }
  // }, [defaultPage]);

  useEffect(() => {
    setIsShow(open);
    setNum(0);
    setSearchText('');

    if (!isSuperAdmin) {
      //删除选择的最后一项
      appOptions.splice(2, 1);
    }
  }, [open]);

  const changeOk = () => {
    //这里需要发送网络请求
    // const baseReset = {
    //   page: 1,
    //   page_size: 20,
    //   searchText: '',
    //   app_status: null,
    // };
    // const newPageState = {
    //   ...baseReset,
    //   app_type: appOptions[num].id,
    //   app_workbench_type: 'market,public',
    // };
    // setAppList([]);
    // setDefaultPage(newPageState);
    // setflag(true);
    // setIsNoData(false);
    // setIsHaveData(true);
    if (appOptions[num].id === 'fusion') {
      changeToPage && changeToPage(3);
      return;
    }

    setKey((prev) => prev + 1);
    setShowTitle(appOptions[num].title);
    setAppType(appOptions[num].id);
    setIsShowModel(true);
    onCancel && onCancel();
  };

  const handleCancel = () => {
    setIsShowModel(false);
  };

  // 搜索框
  const changeSearchValue = (e: any) => {
    //拿到搜索的数据
    // setDefaultPage((prev) => ({
    //   ...prev,
    //   searchText: e.target.value,
    //   page: 1,
    // }));
    // setAppList([]);
    setSearchText(e.target.value);
  };

  // const onscroll = () => {
  //   if (appList.length >= total) {
  //     return;
  //   }
  //   setDefaultPage((prev) => ({ ...prev, page: defaultPage.page + 1 }));
  // };
  const confirm = (item: any) => {
    console.log(item);
  };

  return (
    <>
      <Modals
        width={!isSuperAdmin ? 670 : 1020}
        title={title}
        open={isShow}
        onOk={changeOk}
        onCancel={onCancel}
        okText="下一步"
      >
        <div className="flex  justify-between">
          {appOptions.map((item, index) => {
            return (
              <GradientBox
                active={num === index}
                key={index}
                onClick={() => {
                  setNum(index);
                }}
                className=" flex h-[270px] w-[315px] flex-col  items-center justify-center rounded-[18px] p-1"
              >
                <div className="flex h-[200px] w-[300px] items-center justify-center rounded-default">
                  {item.icon}
                </div>
                <div className="mb-5 text-center">
                  <div className="text-lg font-bold ">{item.title}</div>
                  <div className="text-xs ">{item.description}</div>
                </div>
              </GradientBox>
            );
          })}
        </div>
      </Modals>

      {/* 填充一个应用浮层 */}
      <Modals
        title={showTitle}
        width={1000}
        centered
        open={isShowModel}
        onOk={handleCancel}
        onCancel={handleCancel}
        footerCancelHidden={true}
        footerOkHidden={true}
        className="modals-mode"
      >
        {/* <Input
          className="my-[10px] h-[40px] !rounded-default"
          onChange={changeSearchValue}
          value={searchText}
          placeholder="搜索应用"
          prefix={<SearchOutlined className="text-1xl text-gray-400 " />}
        /> */}
        <div className="flex justify-end">
          <Input
            value={searchText}
            onChange={changeSearchValue}
            className="mb-[15px] !rounded-md"
            style={{
              height: '32px',
              width: '200px',
            }}
            placeholder="请输入内容"
            suffix={<SvgIcon icon="work-ic6" size={16} />}
          />
        </div>
        {/* <WorkModule
          data={appList}
          onType={'market'}
          isNoData={isNoData}
          isHaveData={isHaveData}
          flag={flag}
          showTitle={showTitle}
          onToAssistant={goToAssistant}
          onGoToApplication={goToApplication}
          onChangeToPage={changeToPage}
          setWorkItems={setWorkItems}
          onScroll={onscroll}
          setflag={(value) => setflag(value)}
        /> */}

        <BoxInfo
          onType="market"
          paramsType={appType === 'fusion' ? 'market' : 'pubmar,market'}
          appType={appType}
          showTitle={showTitle}
          isShowBlank={true}
          searchText={searchText}
          onToAssistant={goToAssistant}
          onChangeToPage={changeToPage}
          key={key}
        />

        {/* <BoxInfo
          key={key}
          searchText={searchText}
          isMultiSelect={1}
          appType={appType}
          confirm={confirm}
        /> */}
      </Modals>
    </>
  );
};

export default NewAgentModeModal;
